<div id="chatSection" class="content-section active container mx-auto px-4 py-8">
    <div class="text-center mb-8 fade-in">
        <h1 class="text-4xl font-bold text-gray-800 mb-2">智能助手</h1>
        <p class="text-gray-600">您的专属避暑山庄文化解答专家</p>
    </div>

    <div class="bg-white rounded-2xl shadow-xl p-6 mb-6 fade-in max-w-4xl mx-auto">
        <div class="chat-container overflow-y-auto mb-6 p-4 bg-gray-50 rounded-xl" style="height: 500px;">
            <div id="chatHistory" class="space-y-4">
                <!-- 默认欢迎消息 -->
                <div class="flex items-start space-x-4 animate-fade-in">
                    <div class="flex-shrink-0">
                        <div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center shadow-lg">
                            <i class="fas fa-robot text-white"></i>
                        </div>
                    </div>
                    <div class="flex-1">
                        <div class="bg-gradient-to-r from-green-50 to-blue-50 rounded-2xl p-4 shadow-sm">
                            <p class="text-gray-800">欢迎来到避暑山庄！我是您的智能导游助手，很高兴为您解答关于避暑山庄的任何问题。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 推荐词区域 -->
        <div class="mb-4 p-4 bg-gray-50 rounded-xl">
            <div class="flex justify-between items-center mb-4">
                <div class="flex items-center gap-4">
                    <h3 class="text-gray-700 font-medium">推荐问题：</h3>
                    <select id="suggestionType" 
                        class="px-3 py-1 bg-white border border-gray-300 rounded-lg text-sm focus:outline-none focus:border-blue-500 transition duration-300">
                        <option value="chat">常规问题</option>
                        <option value="image">图片相关</option>
                    </select>
                </div>
                <button onclick="refreshSuggestions()" 
                    class="px-3 py-1 text-sm bg-gradient-to-r from-blue-400 to-blue-500 text-white rounded-lg hover:from-blue-500 hover:to-blue-600 transition duration-300 shadow hover:shadow-md flex items-center gap-1">
                    <i class="fas fa-sync-alt"></i>
                    换一批
                </button>
            </div>
            <div id="suggestionTags" class="flex flex-wrap gap-2">
                <!-- 推荐词标签将通过 JavaScript 动态加载 -->
            </div>
        </div>

        <div class="flex flex-col space-y-4">
            <div class="flex space-x-4">
                <input type="text" id="userInput" 
                    class="flex-1 border-2 border-gray-200 rounded-xl px-4 py-3 focus:outline-none focus:border-green-500 transition duration-300"
                    placeholder="请输入您的问题...">
                <button onclick="sendMessage()" 
                    class="px-6 py-3 bg-gradient-to-r from-green-500 to-green-600 text-white rounded-xl hover:from-green-600 hover:to-green-700 transition duration-300 shadow-lg hover:shadow-xl">
                    <i class="fas fa-paper-plane me-2"></i>发送
                </button>
            </div>
            
            <div class="flex items-center space-x-4">
                <input type="file" id="imageInput" accept="image/*" class="hidden">
                <label for="imageInput" 
                    class="cursor-pointer px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl hover:from-blue-600 hover:to-blue-700 transition duration-300 shadow-lg hover:shadow-xl flex items-center">
                    <i class="fas fa-image me-2"></i>上传图片
                </label>
            </div>

            <div id="imagePreview" class="mt-4 hidden">
                <div class="relative inline-block">
                    <img id="previewImage" class="max-h-32 rounded-xl shadow-lg">
                    <button onclick="removeImage()" 
                        class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-600 transition duration-300 shadow-lg">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
            </div>
        </div>

        <div id="loading" class="loading mx-auto mt-4 text-center">
            <div class="inline-block animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-green-500"></div>
        </div>
    </div>

    <style>
        .suggestion-tag {
            display: inline-block;
            padding: 0.5rem 1rem;
            background: linear-gradient(to right, #e2e8f0, #edf2f7);
            border-radius: 0.75rem;
            color: #4a5568;
            font-size: 0.875rem;
            cursor: pointer;
            transition: all 0.3s;
            border: 1px solid #e2e8f0;
        }
        
        .suggestion-tag:hover {
            background: linear-gradient(to right, #cbd5e0, #e2e8f0);
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>

    <script>
        let allSuggestions = [];
        let imageRelatedSuggestions = [];
        let currentSuggestions = [];
        let currentIndex = 0;
        const SUGGESTIONS_PER_PAGE = 3;
        let isShowingImageSuggestions = false;
        let suggestionsLoaded = {
            chat: false,
            image: false
        };

        // 初始化事件监听器
        document.addEventListener('DOMContentLoaded', function() {
            // 图片上传事件监听
            const imageInput = document.getElementById('imageInput');
            if (imageInput) {
                imageInput.addEventListener('change', handleImageUpload);
            }

            // 推荐词类型切换监听
            const suggestionType = document.getElementById('suggestionType');
            if (suggestionType) {
                suggestionType.addEventListener('change', function(e) {
                    const toImageSuggestions = e.target.value === 'image';
                    switchSuggestions(toImageSuggestions);
                });
            }
        });

        // 加载普通推荐词
        fetch('/static/data/chat_suggestions.txt')
            .then(response => response.text())
            .then(text => {
                allSuggestions = text.split('\n').filter(line => line.trim());
                currentSuggestions = allSuggestions;
                suggestionsLoaded.chat = true;
                displaySuggestions();
            })
            .catch(error => {
                console.error('Error loading chat suggestions:', error);
                suggestionsLoaded.chat = true;
            });

        // 加载图片相关推荐词
        fetch('/static/data/image_suggestions.txt')
            .then(response => response.text())
            .then(text => {
                imageRelatedSuggestions = text.split('\n').filter(line => line.trim());
                suggestionsLoaded.image = true;
            })
            .catch(error => {
                console.error('Error loading image suggestions:', error);
                suggestionsLoaded.image = true;
            });

        // 显示推荐词
        function displaySuggestions() {
            const container = document.getElementById('suggestionTags');
            container.innerHTML = ''; // 清空现有内容
            
            const suggestions = currentSuggestions;
            if (!suggestions || suggestions.length === 0) {
                container.innerHTML = '<div class="text-gray-500">加载推荐词中...</div>';
                return;
            }
            
            for (let i = 0; i < SUGGESTIONS_PER_PAGE; i++) {
                const index = (currentIndex + i) % suggestions.length;
                const suggestion = suggestions[index];
                
                const tag = document.createElement('div');
                tag.className = 'suggestion-tag';
                tag.textContent = suggestion;
                tag.onclick = () => {
                    document.getElementById('userInput').value = suggestion;
                    document.getElementById('userInput').focus();
                };
                container.appendChild(tag);
            }
        }

        // 刷新推荐词
        function refreshSuggestions() {
            if (!currentSuggestions || currentSuggestions.length === 0) {
                return;
            }

            const button = document.querySelector('button[onclick="refreshSuggestions()"]');
            const icon = button.querySelector('i');
            
            icon.style.transition = 'transform 0.5s';
            icon.style.transform = 'rotate(360deg)';
            
            currentIndex = (currentIndex + SUGGESTIONS_PER_PAGE) % currentSuggestions.length;
            displaySuggestions();
            
            setTimeout(() => {
                icon.style.transform = 'rotate(0deg)';
            }, 500);
        }

        // 切换推荐词类型
        async function switchSuggestions(toImageSuggestions) {
            // 等待所需的推荐词加载完成
            const maxAttempts = 50; // 5秒超时
            let attempts = 0;
            
            while (!suggestionsLoaded[toImageSuggestions ? 'image' : 'chat'] && attempts < maxAttempts) {
                await new Promise(resolve => setTimeout(resolve, 100));
                attempts++;
            }

            if (attempts >= maxAttempts) {
                console.error('Timeout waiting for suggestions to load');
                return;
            }

            if (toImageSuggestions !== isShowingImageSuggestions) {
                currentIndex = 0;
                isShowingImageSuggestions = toImageSuggestions;
                currentSuggestions = toImageSuggestions ? imageRelatedSuggestions : allSuggestions;
                
                // 更新下拉框的值
                const suggestionType = document.getElementById('suggestionType');
                if (suggestionType) {
                    suggestionType.value = toImageSuggestions ? 'image' : 'chat';
                }
                
                displaySuggestions();
            }
        }

        // 图片处理函数
        function handleImageUpload(event) {
            const file = event.target.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = async function(e) {
                    document.getElementById('previewImage').src = e.target.result;
                    document.getElementById('imagePreview').classList.remove('hidden');
                    
                    // 自动切换到图片相关推荐词
                    const suggestionType = document.getElementById('suggestionType');
                    if (suggestionType) {
                        suggestionType.value = 'image';
                    }
                    await switchSuggestions(true);
                }
                reader.readAsDataURL(file);
            }
        }

        // 移除图片函数
        function removeImage() {
            document.getElementById('imageInput').value = '';
            document.getElementById('imagePreview').classList.add('hidden');
            document.getElementById('previewImage').src = '';
            
            // 自动切换回常规推荐词
            const suggestionType = document.getElementById('suggestionType');
            if (suggestionType) {
                suggestionType.value = 'chat';
            }
            switchSuggestions(false);
        }
    </script>
</div>